<template>
  <div class="middle">
    <div class='sum-num'>
      <div class='sum1'>近三年审计问题</div>
      <div class='sum2'>4622</div>
    </div>
    <div id="containerMap" class="containerMap"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {chinaMap,chinaGeoCoordMap} from '../../../assets/js/map'

export default {
  data(){
    return{

    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData(){
      let chinaData = [
        {
          name: '兰州市',
          value: 372
        },
        {
          name: '天水市',
          value:480
        },
        {
          name: '金昌市',
          value:222
        },
        {
          name: '陇南市',
          value: 366
        },
        {
          name: '甘南藏族自治州',
          value: 412
        },
        {
          name: '临夏回族自治州',
          value: 342
        },
        {
          name: '白银市',
          value: 322
        },
        {
          name: '庆阳市',
          value: 298
        },
        {
          name: '定西市',
          value: 323
        },
        {
          name: '陇南市',
          value: 356
        },
        {
          name: '嘉峪关市',
          value:77
        },
        {
          name: '张掖市',
          value: 282
        },
        {
          name: '平凉市',
          value: 475
        },
        {
          name: '武威市',
          value: 368,
        },
        {
          name: '酒泉市',
          value: 372
        }
      ];

      let convertData = function (data) {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let geoCord = chinaGeoCoordMap[data[i].name];
          if (geoCord) {
            res.push({
              name: data[i].name,
              value: geoCord.concat(data[i].value)
            });
          }
        }
        return res;
      }

      let chartDom = document.getElementById('containerMap');
      let myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: 'item',
          formatter:function(params) {
            // console.log(params)
            if (params.seriesType == "map"){
              return params.data.name + '：' + params.data.value
            }else{
              return params.data.name + '：' + params.data.value[2]
            }
          }
        },
        geo: {
          show: true,
          map: 'GS',
          type: 'map',
          label: {
            show: false
          },
          roam: false,
          itemStyle: {
            normal: {
              borderWidth: 5,
              borderColor: '#3df5fb',
              shadowColor: '#3df5fb',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 30,
            },
            emphasis: {
              show: false,
              // areaColor: '#01215c'
            }
          }
        },
        series: [
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(chinaData),
            symbolSize: 10,
            symbolRotate: 10,
            itemStyle: {
              normal: {
                color: '#05efb7'
              }
            }
          },
          {
            name: '近三年审计问题',
            type: 'map',
            selectedMode: false,
            map: 'GS',
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#ffffff'
                },
              },
              emphasis: {
                textStyle: {
                  color: '#ffffff'
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#127c92',
                borderColor: '#3df5fb',
                borderWidth: 3,
              },
              emphasis: {
                areaColor: '#14a6c1'
              }
            },
            data: chinaData,
          }
        ]
      };
      echarts.registerMap('GS', chinaMap);
      myChart.setOption(option);
    }
  }
}
</script>

<style scoped>
.middle{
  background-image: url("../../../assets/img/mapBg.png");
  background-size: 100% 100%;
  width: 100%;
  height: calc(92vh - 70px)
}
.containerMap{
  width: 100%;
  height: calc(92vh - 200px)
}
.sum-num{
  width: 200px;
  height: 80px;
  background-image: url('../../../assets/img/mapCountBg.png');
  background-size: 100% 100%;
}
.sum1{
  opacity: 0.8;
  font-family: TRENDS;
  font-size: 20px;
  color: #FFFFFF;
  letter-spacing: 0;
  font-weight: 400;
  text-align:center;
  line-height: 35px;
}
.sum2{
  font-family: TRENDS;
  font-size: 32px;
  color: #FFC93E;
  letter-spacing: 5.73px;
  font-weight: 400;
  text-align:center;
}
</style>
